<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="1000px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" :disabled="disabled"
        :loading="loading">
        <el-form-item label="空投标题" prop="title">
          <el-input v-model="form.title" placeholder="请填写空投标题" :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="空投奖品" prop="" :required='true'>
          <div class="">
            <div class="el_table_box_d">
              <div class="el_table_box_d_t">
                <!-- <div class="tab_index">序号</div> -->
                <div class="tab_name">奖品类型</div>
                <div class="tab_name">选择奖品</div>
                <div class="tab_name">每人获赠数量</div>
                <div class="tab_operation">操作</div>
              </div>
              <div class="tab_none" v-if="form.prizeList.length==0">暂无数据</div>
              <div class="el_table_box_d_b" v-for="(item,index) in form.prizeList" :key="index">
                <!-- <div class="tab_index_d">{{index+1}}</div> -->
                <div class="tab_name_d">
                  <el-form-item label="" :prop="
                    'prizeList.' + index + '.prizeType'
                  " :rules="rules.prizeType">
                    <el-select filterable v-model="item.prizeType" placeholder="请选择" clearable style="width: 180px" @change="selectChange(item)">
                      <el-option v-for="dict in prizeTypeLs" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="tab_name_d" v-if="item.prizeType==1">
                  <el-form-item label="" :prop="
                    'prizeList.' + index + '.businessId'
                  " :rules="rules.businessId">
                    <el-select filterable v-model="item.businessId" placeholder="请选择" value-key="merchantId" clearable
                      style="width: 180px">
                      <el-option v-for="dict in equityList" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="tab_name_d" v-if="item.prizeType!=1&&item.prizeType!=3" style="width: 293px">
                  <!-- <el-select filterable v-model="item.businessId" placeholder="请选择" value-key="merchantId" clearable
                      style="width: 180px" :disabled="true">
                      <el-option v-for="dict in airdropBoxList" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select> -->
                </div>
                <div class="tab_name_d" v-if="item.prizeType==3">
                  <el-form-item label="" :prop="
                    'prizeList.' + index + '.businessId'
                  " :rules="rules.businessId">
                    <el-select filterable v-model="item.businessId" placeholder="请选择" value-key="merchantId" clearable
                      style="width: 180px">
                      <el-option v-for="dict in airdropBoxList" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="tab_name_d">
                  <el-form-item label="" :prop="
                    'prizeList.' + index + '.amount'
                  " :rules="rules.amount">
                    <el-input v-model="item.amount" placeholder="请输入每人获赠数量"></el-input>
                  </el-form-item>
                </div>
                <div class="tab_operation_d">
                  <el-button @click="addProduct" type="primary" size="mini" v-if="index == 0">添加奖品</el-button>
                  <el-button @click="deleteProduct(index)" type="danger" size="mini" v-if="form.prizeList.length>1">删除
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div v-if="disabled">
        <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="用户姓名" align="center" prop="customerName" :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center" prop="customerPhone" :show-overflow-tooltip="true" />
          <el-table-column label="校验结果" align="center" prop="customerPhone" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span class="el-icon-success icon_yes" v-if="scope.row.customerName"></span>
            </template>
          </el-table-column>
          <el-table-column label="空投状态" align="center" prop="time" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="airdropStatus" :value="scope.row.status" :color="scope.row.status==2?'#67c23a':'red'" />
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="text" @click="watchRecord(scope.row)" v-if="scope.row.remark!=''">查看记录
              </el-button> -->
              <el-popover placement="top-start" title="" width="300" trigger="click" :content="scope.row.remark"
                v-if="scope.row.remark!=''">
                <el-button type="text" slot="reference">查看记录</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!disabled" :loading="sumitLoading">提交保存</el-button>
        <el-button @click="cancel" v-if="!disabled">取 消</el-button>
        <el-button @click="cancel" v-if="disabled">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  const uniqueArrayObject = (arr = [], key = 'id') => { //去除数组重复对象方法
    if (arr.length === 0) return
    let list = []
    const map = {}
    arr.forEach((item) => {
      if (!map[item[key]]) {
        map[item[key]] = item
      }
    })
    list = Object.values(map)
    return list
  }
  import {
    getToken
  } from "@/utils/auth";
  import {
    addAirdrop,
    updateAirdrop,
    airdropEquityLs,
    getAirdropDetail,
    getAirdropCustomerLs,
    airdropBoxLs
  } from "@/api/incentiveManagement";

  export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    data() {
      return {
        labelWidth: '80px',
        inputWidth: '400px',
        loading: false,
        sumitLoading: false,
        id: '', //
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        visible: false,
        // 导入所需参数
        addLoading: false,
        tabelList: [],
        fileData: {
          issueId: ''
        },
        fileList: [],
        fileaction: process.env.VUE_APP_BASE_API + "/equityManager/equityCardIssue/importWhite",
        headers: {
          "X-Access-Token": getToken(),
        }, //设置上传文件请求头
        prizeTypeLs: [], //奖品类型
        equityList: [], //空投权益卡下拉框
        airdropBoxList:[],//空投奖品盲盒下拉框
        // 表单参数
        form: {
          id: null, //空投id,编辑的时候传
          title: '', //标题
          prizeList: [ //产品详情数组
            {
              amount: "", //赠送数量
              businessId: "", //奖品id
              prizeType: "", //奖品类型 equity_card_issue_type 1数字权益卡 2 盲盒优惠券 3 盲盒奖品
            }
          ],
        },
        // 表单校验
        rules: {
          title: [{
            required: true,
            message: "请填写空投标题",
            trigger: ["blur", "change"]
          }],
          amount: [{
            required: true,
            message: "请输入赠送数量",
            trigger: "change"
          }],
          businessId: [{
            required: true,
            message: "请选择奖品",
            trigger: "change"
          }],
          prizeType: [{
            required: true,
            message: "请选择奖品类型",
            trigger: "change"
          }],
        },
      };
    },
    created() {

    },
    methods: {
      //获取奖品类型字典
      getDict() {
        var dictType = "airdrop_prize_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.prizeTypeLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //查询空投权益卡下拉框
      getAirdropEquityLs(id) {
        let data = {}
        airdropEquityLs(data).then(response => {
          this.equityList = response.result
        });
      },
      //查询空投奖品盲盒下拉框
      getAirdropBoxLs(id) {
        let data = {}
        airdropBoxLs(data).then(response => {
          this.airdropBoxList = response.result
        });
      },
      //获取空投状态字典
      getairdropDict() {
        var dictType = "airdrop_customer_status";
        this.$getSelectList(dictType)
          .then((res) => {
            this.airdropStatus = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //查询空投用户列表
      getCustomerLs(id) {
        this.loading = true
        getAirdropCustomerLs(id).then(response => {
          this.tabelList = response.result
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      selectChange(item){ //奖品类型选择
        console.log(item)
        item.businessId = ''
      },
      /** 打开发行管理弹框 */
      open(id, disabled) {
        this.getDict()
        this.getAirdropEquityLs()
        this.getAirdropBoxLs()
        this.reset();
        this.disabled = disabled
        this.id = id
        console.log(id)
        if (id) {
          this.getairdropDict()
          this.getCustomerLs(id)
          this.loading = true
          getAirdropDetail(id).then(response => {
            this.form = response.result;
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
        this.visible = true
        if (this.disabled) {
          this.title = "查看空投"
        } else if (id) {
          this.title = "编辑空投"
        } else {
          this.title = "新增空投"
        }
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.sumitLoading = false
        // 子表选中数据
        this.form = {
          id: null, //空投id,编辑的时候传
          title: '', //标题
          prizeList: [ //产品详情数组
            {
              amount: "", //赠送数量
              businessId: "", //奖品id
              prizeType: "", //奖品类型 equity_card_issue_type 1数字权益卡 2 盲盒优惠券 3 盲盒奖品
            }
          ],
        }
      },
      //奖品类型选择
      changePrize(e) {
        console.log(e)
        // if(e==1){
        //   this.getAirdropEquityLs()
        // }
      },
      uniqueArrayObject() { //判断是否存在重复奖品
        let list = uniqueArrayObject(this.form.prizeList, 'businessId')
        console.log(list)
        console.log(this.form.prizeList)
        if (list.length < this.form.prizeList.length) {
          return false
        } else {
          return true
        }
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let check = this.uniqueArrayObject() //判断是否存在重复奖品
            if (!check) {
              this.$message.error('不可选择重复的奖品，请重新选择或删除重复奖品');
              return
            }
            if (this.form.id != null) {
              this.sumitLoading = true
              updateAirdrop(this.form).then(response => {
                this.$message.success('修改成功');
                this.cancel();
                this.$emit('refresh')
              }).catch(() => {
                this.sumitLoading = false;
              });
            } else {
              this.sumitLoading = true
              addAirdrop(this.form).then(response => {
                this.$message.success('新增成功');
                this.cancel();
                this.$emit('refresh')
              }).catch(() => {
                this.sumitLoading = false;
              });
            }
          }
        });
      },
      /** 序号 */
      rowIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
      addProduct() {
        //添加产品
        this.form.prizeList.push({
          amount: "", //赠送数量
          businessId: "", //奖品id
          prizeType: "", //奖品类型 equity_card_issue_type 1数字权益卡 2 盲盒优惠券 3 盲盒奖品
        });
      },
      deleteProduct(index) {
        //删除产品
        this.form.prizeList.splice(index, 1);
      },
      /** 添加手机号按钮 */
      addUser() {
        this.addLoading = true
        addWhite(this.form).then(response => {
          this.$message.success('添加成功');
          // this.getWhiteList(this.form.issueId)
          this.form.phone = ''
          this.addLoading = false
        }).catch(() => {
          this.addLoading = false
        });
      },
      /** 查看记录按钮 */
      watchRecord(row) {
        this.$alert(row.remark, '备注', {
          confirmButtonText: '确定',
          callback: action => {}
        });
      },
    }
  };

</script>
<style scoped>
  .main {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
  }

  .tab {
    display: flex;
    align-items: center;
    height: 40px;
  }

  .tab_box {
    font-size: 14px;
    height: 100%;
    width: 100px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #dfe6ec;
    border-radius: 4px 0 0 4px;
    color: #333;
  }

  .tab_box:hover {
    opacity: 0.8;
  }

  .tab_box_active {
    background-color: #ff9300;
    border: 1px solid #ff9300;
    color: #fff;
  }

  .tab_box:nth-child(2) {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .tab_box:nth-child(3) {
    border-radius: 0 4px 4px 0;
  }

  .main_info {
    margin-top: 40px;
  }

  .stock_txt {
    font-size: 13px;
    color: #333333;
    padding-left: 100px;
    margin-bottom: 20px;
  }

  .dflex {
    display: flex;
    align-items: center;
  }

  .el_table_box {
    padding: 40px 20px 40px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .el_table_box_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 14px;
  }

  .el_table_box_h_title {
    border-left: 4px solid #ff9300;
    padding-left: 4px;
  }

  .commodity_album {
    padding-top: 20px;
  }

  .carousel_box {
    padding-top: 60px;
    width: 400px;
  }

  .carousel_box_title {
    font-size: 15px;
    color: #ff9300;
    margin-bottom: 20px;
  }

  .swiper_img {
    width: 100%;
    height: 100%;
  }

  .phone_box {
    border: 10px solid #f3f3f3;
    border-radius: 8px;
    line-height: 0;
  }

  .button_box {
    padding-top: 30px;
    padding-left: 100px;
  }

  .explain_txt {
    font-size: 20px;
    margin-left: 20px;
    color: #ff9300;
  }

  .el_table_box_d {
    border: 1px solid #dfe6ec;
    width: 100%;
  }

  .el_table_box_d_t {
    display: flex;
    align-items: center;
    color: #909399;
    font-size: 14px;
    font-weight: bold;
  }

  .tab_index {
    width: 64px;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
    height: 56px;
    display: flex;
    align-items: center;
  }

  .tab_name {
    height: 40px;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
  }

  .tab_num {
    height: 40px;
    display: flex;
    align-items: center;
    width: 35%;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
  }

  .tab_operation {
    width: 160px;
    padding: 10px;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .tab_index_d {
    width: 64px;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
    height: 76px;
    display: flex;
    align-items: center;
  }

  .tab_name_d {
    height: 76px;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
  }

  .tab_num_d {
    height: 76px;
    display: flex;
    align-items: center;
    width: 35%;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
  }

  .tab_operation_d {
    width: 160px;
    padding: 10px;
    height: 76px;
    display: flex;
    align-items: center;
  }

  .el_table_box_d_b {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 15px;
    border-top: 1px solid #dfe6ec;
  }

  .detail_button {
    color: #ff4949;
    font-size: 14px;
    cursor: pointer;
  }

  .tab_none {
    color: #909399;
    font-size: 15px;
    border-top: 1px solid #dfe6ec;
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }

  .disx {
    display: flex;
    align-items: center;
  }

  .icon_yes {
    font-size: 28px;
    color: #67c23a;
  }

</style>
